<template>
  <div class="member-popup">
    <transition name="van-fade">
      <div :class="['content', {'waiting-box': waitingVisible}]" v-show="visible">
        <van-icon name="cross" size="20" @click.stop="closePopup" color="#999999"/>

        <template v-if="!waitingVisible">
          <p class="title">经纪云大学</p>
          <p class="info">
            <span class="evaluation">评</span>
            <span>一人一策综合素质测评</span>
          </p>
          <p class="info">
            <span class="study">学</span>
            <span>系统化、分等级的学习</span>
          </p>
          <p class="info">
            <span class="exercise">练</span>
            <span>AI智能场景实战对练</span>
          </p>
          <p class="info">
            <span class="examination">测</span>
            <span>等级通关颁发结业证书</span>
          </p>

          <p class="tips">{{ tipsText }}</p>
        </template>

        <p v-else class="waiting-tips">权益开通中，如有疑问<br />请联系您的专属顾问</p>

        <van-button color="#3396fb" block @click.stop="handelBtnLick">{{ btnText }}</van-button>
      </div>
    </transition>
  </div>
</template>

<script>
import { Button, Icon, Toast } from 'vant';
import HftApi from "@/repo/api/HftApi";
import store from '@/repo/store/store';
import { isAndroid, isIOS } from "@/utils/util";

export default {
  name: 'BuyMemberPopup',
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button
  },

  data() {
    return {
      visible: false,
      detpIsOpen: 0,
      userIsOpen: 0,
      isManager: 0,
      universityIsOpen: 0
    };
  },

  mounted() {
    this.detpIsOpen = store.getters['memberInfo/detpIsOpen'];
    this.userIsOpen = store.getters['memberInfo/userIsOpen'];
    this.isManager = store.getters['memberInfo/isManager'];
    this.universityIsOpen = store.getters['memberInfo/universityIsOpen'];

    window['memberBuyUserCallback'] = str => this.buyMember(str);
  },

  computed: {
    tipsText() {
      // 门店未开，用户为管理员或者门店已开个人未开
      if (
        (!this.detpIsOpen && this.isManager) ||
        (this.detpIsOpen && !this.userIsOpen)
      ) return '开通安家GO会员，即可加入学习';

      if (!this.detpIsOpen && !this.isManager) return '提醒店长开通会员，即可加入学习';
    },

    btnText() {
      if (!this.detpIsOpen && !this.isManager) return '立即提醒';

      if (
        (!this.detpIsOpen && this.isManager) ||
        (this.detpIsOpen && !this.userIsOpen)
      ) return '立即开通';

      if (!this.universityIsOpen) return '我知道了';
    },

    waitingVisible() {
      return this.detpIsOpen && this.userIsOpen && !this.universityIsOpen
    }
  },
  methods: {
    handelBtnLick() {
      // 门店未开通，用户为普通身份，提醒管理员开通
      if (!this.detpIsOpen && !this.isManager) {
        return HftApi.sendOpenAnjiaMemberToBrokerManager().then(() => {
          Toast('提醒成功');
          this.closePopup();
        });
      }

      // 门店未开，用户是管理员   门店已开，用户未开
      if ((!this.detpIsOpen && this.isManager) || (this.detpIsOpen && !this.userIsOpen)) {
        window.zshft.OnJsHasAdminParams("ANJIA_MEMBER_BUY_URL", 'memberBuyUserCallback');
        return this.closePopup();
      }

      if (!this.universityIsOpen) return this.closePopup();
    },

    buyMember(url) {
      isIOS && window.zshft.jumpNavtiveURL(`zshft://com.dynamic?targetclass=HFTBaseWebViewController&netUrl=${ encodeURIComponent(url) }`);
      isAndroid && window.zshft.jumpNavtiveURL(url);
    },

    closePopup() {
      this.visible = false;
      this.destroyElement();
      this.$el.addEventListener('animationend', this.destroyElement);
      this.$el.addEventListener('transitionend', this.destroyElement);
    },

    destroyElement() {
      this.$el.removeEventListener('animationend', this.destroyElement);
      this.$el.removeEventListener('transitionend', this.destroyElement);

      this.$destroy();
      this.$el.parentNode.removeChild(this.$el);
      document.body.style.overflow = '';
      document.body.style.position = 'relative';
      document.body.style.scroll = 'yes';
    }
  },
};
</script>

<style lang="less" scoped>
.member-popup {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .3);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    position: relative;
    width: 305px;
    //height: 350px;
    border-radius: 10px;
    background: #ffffff url("https://cdn.uj.cn/static/zhiyecn/hft-enterprise/modal_bg@3x.png") no-repeat;
    background-size: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;

    &.waiting-box {
      background: #ffffff;

      .waiting-tips {
        font-size: 15px;
        color: #0f1d37;
        line-height: 22px;
        margin: 20px 0;
        text-align: center;
      }
    }

    .van-icon-cross {
      position: absolute;
      right: 0;
      top: 0;
      padding: 10px 15px 0 0;
    }

    .title {
      font-size: 20px;
      color: #0f7cec;
      font-weight: bold;
      text-align: center;
      margin-bottom: 22px;
    }

    .info {
      display: flex;
      align-items: center;

      span {
        &:first-of-type {
          width: 23px;
          height: 23px;
          border-radius: 50%;
          //background: #3396fb;
          display: inline-block;
          font-size: 14px;
          color: #ffffff;
          font-weight: bold;
          text-align: center;
          line-height: 23px;
          margin-right: 8px;
        }

        &:last-of-type {
          color: #2c2c2c;
          font-size: 15px;
          line-height: 36px;
          display: inline-block;
          min-width: 10em;
        }
      }

      .evaluation {
        background: #3396fb;
      }

      .study {
        background: #77b452;
      }

      .exercise {
        background: #eea800;
      }

      .examination {
        background: #ec7962;
      }
    }

    .tips {
      text-align: center;
      font-size: 13px;
      color: #3396fb;
      margin-bottom: 12px;
      margin-top: 30px;
    }

    .van-button {
      border-radius: 5px;
      font-size: 16px;
    }
  }
}
</style>
